<template>
  <boder-box-1>
    <dv-card
      :cardBg="require('@/assets/5dhz/4bj.png')"
      class="mb-5"
      style="width: 444px; height: 256px"
    >
      <template #header>
        <dv-title1
          :background-image-url="
            require('@/assets/threeGovernment/titleBj.png')
          "
          >防疫</dv-title1
        >
      </template>
      <div class="content">
        <Image
          :src="require('@/assets/components/board/a6.png')"
          width="410"
        ></Image>
        <Progress
          v-for="(v, i) in progressData"
          :key="i"
          :icon="require('@/assets/threeMechanism/公共-红旗.png')"
          :iconSize="['26px', '26px']"
          :name="v.name"
          height="8px"
          :value="v.value"
          :unit="v.unit"
          :max="v.max"
          color="linear-gradient(90deg, #02A7F0, #E2E9F9)"
          :round="false"
          border="1px solid #0EFCFF"
          :area="true"
        />
      </div>
    </dv-card>
  </boder-box-1>
</template>

<script>
import BoderBox1 from "@/components/BorderBox1/index.vue";
import DvTitle1 from "@/components/DvTitle1";
import DvCard from "@/components/DvCard/index.vue";
import Progress from "@/components/charts/Progress.vue";
import Image from "@/components/Image";
export default {
  name: "Prevention",
  data() {
    return {
      progressData: [
        { name: "招商引资", value: "300", unit: "亿元", max: "350" },
        {
          name: "政府及国企投资重大项目",
          value: "175",
          unit: "亿元",
          max: "220",
        },
      ],
    };
  },
  components: {
    BoderBox1,
    DvTitle1,
    DvCard,
    Image,
    Progress,
  },
};
</script>

<style lang="scss" scoped>
.content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  // padding: 0 22px 18px 22px;
  box-sizing: border-box;
}
</style>
